<template>
	<view>
		<view class="cu-list menu-avatar">
			<view class="cu-item arrow">
				<view class="cu-avatar round lg" :style="'background-image:url(' + user_info.community.logo + ');'"></view>
				<view class="content">
					<view class="text-grey">车位:{{ out_room_id }}</view>
					<view class="text-gray text-sm flex">
						<view class="text-cut">车牌:{{ number_plate ? number_plate : '无' }}</view>
					</view>
				</view>
				<!-- <view class="action" @click="changeRoom">
						<view class="text-grey text-xs"></view>
						<view class="cu-tag round bg-grey lg">更换</view>
					</view> -->
			</view>
		</view>

		<view class="errormsgDiv" v-if="nodata">
			<view class="errormsg">\（￣︶￣）/</view>
			<view class="errormsg2">没有相关数据</view>
		</view>
		<view v-else>
			<view class="cu-bar bg-white solid-bottom margin-top-20">
				<view class="action">
					<text class="cuIcon-titles text-orange"></text>
					待缴费账单
				</view>
				<!-- <view class="action" @click="viweHistore">
				 查看历史账单
			</view> -->
			</view>

			<view class="cu-list menu">
				<view class="cu-item " :key="index" v-for="(item, index) in bills_list" @click="countPrice" :data-index="index">
					<view class="content padding-tb-sm">
						<view>{{ item.acct_period }} {{ item.cost_type }}</view>
						<view class="text-gray text-sm">{{ item.release_day }}</view>
					</view>
					<view class="action">
						<checkbox-group>
							<view class="cu-form-group">
								<view class="cu-tag round bg-orange light">￥{{ item.bill_entry_amount }}</view>
								<checkbox style="margin-left:10px" :class="checkbox[index] ? 'checked' : ''" :checked="checkbox[index] ? true : ''"></checkbox>
							</view>
						</checkbox-group>
					</view>
				</view>
			</view>
			<view style="height: 120upx;"></view>
			<view class="fixed-btn">
				<view class="selectAllBox">
					<checkbox-group class="block" @click="selectAll">
						<view class="cu-form-group">
							<view class="title">全选</view>
							<checkbox :class="selectAllcheckbox ? 'checked' : ''" :checked="selectAllcheckbox ? true : ''"></checkbox>
						</view>
					</checkbox-group>
				</view>
				<view class="postOrderBox">
					<button @click="postOrder" class="cu-btn block bg-blue ">
						<text :class="loadding == 1 ? 'cuIcon-loading2 cuIconfont-spin' : 'cuIconfont-spin'"></text>
						支付 {{ bill_amount }} 元
					</button>
				</view>
				<view class="clear"></view>
			</view>
		</view>
	</view>
</template>

<script>
import beeApp from '../../beeApp.js';
export default {
	data() {
		return {
			checkbox: {},
			loadding: 0,
			selectAllcheckbox: false,
			user_info: {
				community: {},
				tenement_type: []
			},

			page: 1,
			lastPage: 0,
			mounted: 0,
			room_info: {},
			showNoData: 0,
			bills_list: [],
			bill_amount: '0.00',
			out_room_id: '',
			community_id: '',
			nodata: 0
		};
	},
	onPullDownRefresh() {
		this.load(1);
		uni.stopPullDownRefresh();
	},
	onLoad(option) {
		
			this.community_id = option.community_id;
			this.out_room_id = option.parking_id;
			this.number_plate = option.number_plate;
			this.load();
		
	},

	onShow: function() {
		// var reload = beeApp.getPageData("pages/bills/bills","reload");
		// if(reload==1){
		// 	this.out_room_id =  uni.getStorageSync("out_room_id");
		//              this.community_id = uni.getStorageSync("community_id");
		// 	beeApp.setPageData("pages/bills/bills",{reload:0});
		// 	this.load(1);
		// }
	},

	methods: {
		load: function(reload = 0) {
			// this.getRoomInfo(reload);
			// this.getUserInfo(reload);
			this.getBillList(reload);
		},
		changeRoom: function() {
			uni.navigateTo({
				url: '/pages/bills/getOutRoomId'
			});
		},
		viweHistore: function() {
			uni.navigateTo({
				url: '/pages/bills/billsRecords'
			});
		},

		getBillList: function(reload = 0) {
			var out_room_id = this.out_room_id;
			var that = this;
			beeApp.api(
				'/api/community_bills/get',
				{
					community_id: this.community_id,
					out_room_id: out_room_id,
					type: 'car_fee',
					status: 0
				},
				function(res) {
					if (res.code != 200) {
						beeApp.alert(res.msg);
					}
					that.bills_list = res.data.list;
					if (that.bills_list.length === 0) {
						that.nodata = 1;
					} else {
						that.nodata = 0;
					}
				}
			);
		},
		countPrice: function(e) {
			var bill_amount = 0;
			console.log(e);
			// var bill_entry_amount = e.currentTarget.bill_entry_amount;
			var index = e.currentTarget.dataset.index;
			var checkbox = this.checkbox;
			checkbox[index] = checkbox[index] ? false : true;
			this.checkbox = {};
			this.checkbox = checkbox;
			for (var i in checkbox) {
				if (checkbox[i]) {
					bill_amount += Number(this.bills_list[i].bill_entry_amount);
				}
			}
			this.bill_amount = bill_amount.toFixed(2);
		},
		selectAll: function() {
			this.selectAllcheckbox = !this.selectAllcheckbox;
			var checkbox = {};
			var bill_amount = 0;
			if (this.selectAllcheckbox) {
				for (var i in this.bills_list) {
					checkbox[i] = 1;
					bill_amount += Number(this.bills_list[i].bill_entry_amount);
				}
			}

			this.checkbox = checkbox;
			this.bill_amount = bill_amount.toFixed(2);
		},
		postOrder: function() {
			var bill_entry_ids = [];

			if (this.loadding == 1) {
				return;
			}
			var that = this;
			this.loadding = 1;
			console.log(this.checkbox);
			for (var i in this.checkbox) {
				if (this.checkbox[i]) {
					bill_entry_ids.push(this.bills_list[i].bill_entry_id);
				}
			}
			// console.log("bill_entry_ids",bill_entry_ids,this.bills_list);
			if (bill_entry_ids.length === 0) {
				beeApp.alert('请选择账单');
				this.loadding = 0;
				return;
			}
			var userInfo = uni.getStorageSync('user_info');
			// var shop_id =  uni.getStorageSync("shop_id");
			beeApp.api(
				'/api/pay/community_bills_order',
				{
					bill_entry_id: bill_entry_ids.join(','),
					openid: userInfo.openid,
					shop_id: this.community_id,
					method: 'POST',
					title: '缴停车费'
				},
				function(res) {
					if (res.code != 200) {
						that.loadding = 0;
						beeApp.alert(res.msg);
						return;
					}
					beeApp.pay(
						res.data.order_sn,
						res => {
							uni.showModal({
								title: '支付成功',
								content: '恭喜您，缴费成功！'
							});
							that.getBillList(1);
							that.loadding = 0;
						},
						res => {
							that.loadding = 0;
						}
					);
				}
			);
			// console.log(bill_entry_ids);
		},

		setData: function(data) {
			for (var i in data) {
				this[i] = data[i];
			}
		}
	}
};
</script>

<style>
.selectAllBox {
	float: left;
	width: 200upx;
}
.selectAllBox .cu-form-group {
	margin-top: 10upx;
}
.selectAllBox .cu-form-group .title {
	padding-right: 0;
}
.postOrderBox {
	float: right;
	min-width: 500upx;
}
.fixed-btn {
	background: #fff;
}
.postOrderBox button {
	border-radius: 0;
	height: 120upx;
	font-size: 40upx;
}
.cu-list.menu > .cu-item {
	padding-right: 0px;
}
</style>
